{% extends 'cinema/admin/base_admin.html' %}
{% load static %}

{% block title %}管理员仪表板 - 电影院票务管理系统{% endblock %}
{% block page_title %}仪表板{% endblock %}

{% block content %}
<!-- 统计卡片 -->
<div class="row mb-4">
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stats-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-0">{{ total_movies }}</h3>
                    <p class="mb-0">电影总数</p>
                </div>
                <div class="align-self-center">
                    <i class="fas fa-film fa-2x"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stats-card success">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-0">{{ total_orders }}</h3>
                    <p class="mb-0">订单总数</p>
                </div>
                <div class="align-self-center">
                    <i class="fas fa-ticket-alt fa-2x"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stats-card warning">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-0">{{ total_users }}</h3>
                    <p class="mb-0">用户总数</p>
                </div>
                <div class="align-self-center">
                    <i class="fas fa-users fa-2x"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stats-card danger">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-0">{{ today_orders }}</h3>
                    <p class="mb-0">今日订单</p>
                </div>
                <div class="align-self-center">
                    <i class="fas fa-calendar-day fa-2x"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 图表和快速操作 -->
<div class="row mb-4">
    <!-- 订单趋势图 -->
    <div class="col-lg-8 mb-3">
        <div class="admin-card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-chart-line me-2"></i>订单趋势</h5>
            </div>
            <div class="card-body">
                <canvas id="orderChart" height="100"></canvas>
            </div>
        </div>
    </div>
    
    <!-- 快速操作 -->
    <div class="col-lg-4 mb-3">
        <div class="admin-card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-bolt me-2"></i>快速操作</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{% url 'add_movie' %}" class="btn btn-primary btn-admin">
                        <i class="fas fa-plus me-2"></i>添加电影
                    </a>
                    <a href="{% url 'add_screening' %}" class="btn btn-success btn-admin">
                        <i class="fas fa-calendar-plus me-2"></i>添加场次
                    </a>
                    <a href="{% url 'movie_management' %}" class="btn btn-info btn-admin">
                        <i class="fas fa-edit me-2"></i>管理电影
                    </a>
                    <a href="{% url 'order_management' %}" class="btn btn-warning btn-admin">
                        <i class="fas fa-list me-2"></i>查看订单
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 最近订单和热门电影 -->
<div class="row">
    <!-- 最近订单 -->
    <div class="col-lg-8 mb-3">
        <div class="admin-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-clock me-2"></i>最近订单</h5>
                <a href="{% url 'order_management' %}" class="btn btn-sm btn-outline-light">查看全部</a>
            </div>
            <div class="card-body">
                {% if recent_orders %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>订单号</th>
                                    <th>用户</th>
                                    <th>电影</th>
                                    <th>场次</th>
                                    <th>金额</th>
                                    <th>状态</th>
                                    <th>时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for order in recent_orders %}
                                    <tr>
                                        <td><strong>{{ order.order_id }}</strong></td>
                                        <td>{{ order.user.username }}</td>
                                        <td>{{ order.screening.movie.title }}</td>
                                        <td>{{ order.screening.start_time|date:"m-d H:i" }}</td>
                                        <td><span class="badge bg-success">¥{{ order.total_amount }}</span></td>
                                        <td>
                                            {% if order.status == 'pending' %}
                                                <span class="badge bg-warning text-dark">待支付</span>
                                            {% elif order.status == 'paid' %}
                                                <span class="badge bg-success">已支付</span>
                                            {% elif order.status == 'completed' %}
                                                <span class="badge bg-info">已完成</span>
                                            {% else %}
                                                <span class="badge bg-secondary">已取消</span>
                                            {% endif %}
                                        </td>
                                        <td>{{ order.created_at|date:"m-d H:i" }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                        <p class="text-muted">暂无订单记录</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- 热门电影 -->
    <div class="col-lg-4 mb-3">
        <div class="admin-card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-fire me-2"></i>热门电影</h5>
            </div>
            <div class="card-body">
                {% if popular_movies %}
                    {% for movie in popular_movies %}
                        <div class="d-flex align-items-center mb-3">
                            {% if movie.poster %}
                                <img src="{{ movie.poster.url }}" alt="{{ movie.title }}" 
                                     class="rounded me-3" style="width: 50px; height: 70px; object-fit: cover;">
                            {% else %}
                                <div class="bg-secondary rounded d-flex align-items-center justify-content-center me-3" 
                                     style="width: 50px; height: 70px;">
                                    <i class="fas fa-film text-white"></i>
                                </div>
                            {% endif %}
                            <div class="flex-grow-1">
                                <h6 class="mb-0">{{ movie.title }}</h6>
                                <small class="text-muted">
                                    <i class="fas fa-star text-warning me-1"></i>{{ movie.rating }}
                                    <span class="ms-2">{{ movie.screening_count }} 场次</span>
                                </small>
                            </div>
                        </div>
                    {% endfor %}
                {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-film fa-2x text-muted mb-3"></i>
                        <p class="text-muted">暂无热门电影</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 系统状态 -->
<div class="row">
    <div class="col-12">
        <div class="admin-card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-server me-2"></i>系统状态</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 text-center mb-3">
                        <div class="border rounded p-3">
                            <i class="fas fa-film fa-2x text-primary mb-2"></i>
                            <h5 class="mb-1">{{ active_movies }}</h5>
                            <small class="text-muted">正在上映</small>
                        </div>
                    </div>
                    <div class="col-md-3 text-center mb-3">
                        <div class="border rounded p-3">
                            <i class="fas fa-calendar-check fa-2x text-success mb-2"></i>
                            <h5 class="mb-1">{{ today_screenings }}</h5>
                            <small class="text-muted">今日场次</small>
                        </div>
                    </div>
                    <div class="col-md-3 text-center mb-3">
                        <div class="border rounded p-3">
                            <i class="fas fa-users fa-2x text-info mb-2"></i>
                            <h5 class="mb-1">{{ new_users_today }}</h5>
                            <small class="text-muted">今日新用户</small>
                        </div>
                    </div>
                    <div class="col-md-3 text-center mb-3">
                        <div class="border rounded p-3">
                            <i class="fas fa-dollar-sign fa-2x text-warning mb-2"></i>
                            <h5 class="mb-1">¥{{ today_revenue }}</h5>
                            <small class="text-muted">今日收入</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 订单趋势图表
const ctx = document.getElementById('orderChart').getContext('2d');
const orderChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: {{ chart_labels|safe }},
        datasets: [{
            label: '订单数量',
            data: {{ chart_data|safe }},
            borderColor: '#3498db',
            backgroundColor: 'rgba(52, 152, 219, 0.1)',
            borderWidth: 2,
            fill: true,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                grid: {
                    color: 'rgba(0,0,0,0.1)'
                }
            },
            x: {
                grid: {
                    display: false
                }
            }
        }
    }
});
</script>
{% endblock %} 